<template>
  <div>
    <div class="flex items-start justify-between mb-4">
      <span class="rowName" style="color: #333">{{ $t("订单状态") }}</span>
      <span class="rowValue">
        <el-tag :type="getUserStatusName(detailInfo.status)?.type">{{
          getUserStatusName(detailInfo.status)?.name
        }}</el-tag>
      </span>
    </div>
    <div class="flex items-start justify-between mb-4">
      <span class="rowName" style="color: #333">{{ $t("订单号") }}</span>
      <span class="rowValue">{{ detailInfo.order_no }}</span>
    </div>
    <div class="flex items-start justify-between mb-4">
      <span class="rowName" style="color: #333">{{ $t("创建日期") }}</span>
      <span class="rowValue">{{ formatDates(detailInfo.create_time) }}</span>
    </div>
    <div class="flex items-start justify-between mb-4">
      <span class="rowName" style="color: #333">{{ $t("有效日期") }}</span>
      <span class="rowValue">{{ formatDates(detailInfo.expire_time) }}</span>
    </div>
    <el-divider />
    <h3 class="mb-4 text-xl">{{ $t("收款金额") }}</h3>
    <p class="text-3xl">
      {{ numberToCurrencyNo(receiveInfo.amount) }} {{ receiveInfo.currency }}
    </p>
    <el-divider />
    <h3 class="mb-4 text-xl">{{ $t("收款码") }}</h3>
    <div class="flex items-center justify-center mb-4" v-if="pay_url">
      <qrcode-vue :value="pay_url" :size="150" level="H"></qrcode-vue>
    </div>
    <h3 class="mb-4 text-xl">{{ $t("收款链接") }}</h3>
    <p class="text-[#e54c5f] mb-6">{{ pay_url }}</p>
    <div @click="copyLink" class="w-full copyBtn">{{ $t("复制链接") }}</div>
    <el-divider />
    <p class="text-center">{{ $t("仅支持Visa、Mastercard进行支付") }}</p>
  </div>
</template>
<script setup>
import { numberToCurrencyNo, formatDates } from "@/utils/utils";
import QrcodeVue from "qrcode.vue";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import { computed } from "vue";
const { t } = useI18n();
const props = defineProps({
  isShowQR: {
    type: Boolean,
    default: false,
  },
  pay_url: {
    type: String,
    default: "",
  },
  detailInfo: {
    type: Object,
    default: {},
  },
  receiveInfo: {
    type: Object,
    default: {},
  },
});

const statusList = computed(() => {
  return [
    { key: 0, name: `${t("待支付")}`, value: 0, type: "success" },
    { key: 1, name: `${t("支付成功")}`, value: 1, type: "warning" },
    { key: 3, name: `${t("超时")}`, value: 3, type: "danger" },
  ];
});

const getUserStatusName = (status) => {
  if (status > -1) {
    return statusList.value.find((i) => status === i.key);
  }
};

const copyLink = () => {
  navigator.clipboard
    .writeText(props.pay_url)
    .then(() => {
      showSuccessMessage(t("复制成功"));
    })
    .catch((error) => {
      return false;
      //    console.error("复制失败: ", error);
    });
  const showSuccessMessage = (message) => {
    ElMessage({
      showClose: true,
      message: message,
      type: "success",
    });
  };
};
</script>

<style lang="scss" scoped>
.copyBtn {
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
.copyBtn {
  background: #e54c5f;
  color: #fff;
}
</style>
